<template>
  <div class="declaration-report">
    <el-page-header @back="goBack()"> </el-page-header>
    <div class="title-wrap">
      <span class="text-1">{{ process.title }}</span>
      <span class="text-2">
        <!-- <el-button type="warning" plain size="small" @click="save"
          >暂存
        </el-button> -->
        <!-- <el-button type="primary" size="small" @click="triggleSubmit"
          >提交
        </el-button> -->
      </span>
    </div>
    <el-card shadow="never" :body-style="{ padding: '20px', backgroundColor: '#f0f2f5' }">
      <parser v-if="detailForm.fields && detailForm.fields.length" ref="parserRef"
        :key="new Date().getTime()" :form-conf="detailForm" @submit="submit" />
      <span v-else>未获取到表单配置信息</span>
    </el-card>
  </div>
</template>

<script setup>
import { ref /* , reactive */ } from 'vue';
import { MessageBox, Message } from 'element-ui';
import Parser from '@/components/parser';
import { decodeFields } from '@/utils/formGenerator';
import { getFormByDefinitionId } from '@/api/bpm/form';
import { createProcessInstance } from '@/api/bpm/processInstance';
import { useRoute, useRouter } from '@/utils/vue-const';
import { getSessionItem } from '@/utils/global';
import {
  // DECLARATION_NOTICE_CURRENT,
  // NOTICE_FORM_CONFIG_CURRENT,
  NOTICE_PROCESS_CURRENT,
} from '../const';

const route = useRoute();
const router = useRouter();
// const id = route.query.id || '';
// const formKey = route.query?.formKey || '';
const { processDefinitionId = '', id = '' } = route.query;

// 获取基本表单信息
// const info = getSessionItem(DECLARATION_NOTICE_CURRENT) || {};
// 获取当前通知正在填报的流程信息
const process = getSessionItem(NOTICE_PROCESS_CURRENT) || {};

let detailForm = ref({ fields: [] });
// 表单组件对象
const parserRef = ref(null);

function goBack() {
  router.go(-1)
}

// 填报表单
function getFormInfo() {
  // 根据流程 processDefinitionId 获取对应的表单详情信息
  getFormByDefinitionId(processDefinitionId).then((res) => {
    // 设置值
    const data = res.data;
    detailForm.value = {
      ...JSON.parse(data.formConf),
      fields: decodeFields(data.formFields),
    };
  });
  // detailForm.value = getSessionItem(NOTICE_FORM_CONFIG_CURRENT);
}

getFormInfo();

/* function save() {
  MessageBox.confirm('保存填写信息，稍后提交', '提示', {
    type: 'warning',
  }).then(() => {
    // TODO
  });
} */

/* function triggleSubmit() {
  parserRef.value.submitForm();
} */

function submit(params) {
  MessageBox.confirm('确认无误，现在提交', '提示', {
    type: 'info',
  }).then(() => {
    //
    if (!params) {
      return;
    }
    const conf = params.conf;
    conf.disabled = true; // 表单禁用
    conf.formBtns = false; // 按钮隐藏

    // 提交表单，创建流程
    const variables = params.values;
    createProcessInstance({
      processDefinitionId,
      variables: variables,
      title: process.title,
      enterpriseNoticeId: id,
    })
      .then(({ code }) => {
        if (!code) {
          Message.success('发起流程成功');
          // router.push('/retrieval/index');
          // 回到当前编辑通知详情
          goBack();
        }
      })
      .catch(() => {
        conf.disabled = false; // 表单开启
        conf.formBtns = true; // 按钮展示
      });
  });
}
</script>

<style lang="scss">
.declaration-report {
  padding: 16px 20px;

  .title-wrap {
    margin: 10px 0;
    display: flex;
    align-items: center;
    height: 35px;

    .text-1 {
      font-size: 20px;
      flex: 1;
      text-align: center;
      font-weight: bold;
    }

    .text-2 {
      // width: 180px;
      text-align: right;
      color: #169bd5;

      font-size: 16px;
    }
  }
}
</style>
